@extends('student._layouts.app')
@section('css')
    <style>
        .input-area {
            position: absolute;
            top: 200px;
            width: 100%;
            height: 200px;
            overflow: auto;
        }

        .input {
            display: block;
            width: 205px;
            height: 70px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px 0 20px 20px;
            font-size: 56px;
            outline: none;
            border: none;
            letter-spacing:20px;
        }

        .no-attendance {
            width: 100%;
            height: 200px;
            font-size: 20px;
            line-height: 100px;
            text-align: center;
            color: #818181;
        }
        .stopAttendance {
            background-color: #fff;
        }
    </style>
@endsection


@section('content')
    <section class="tabs">
        <a class="tab" href="/teacher/class/{{ $class_id }}/message">留言</a>
        <a class="tab" href="/teacher/class/{{ $class_id }}/work">作业</a>
        <a class="tab active">签到</a>
    </section>
    <section class="input-area">
        @if($attendanceStatus)
            <button class="stopAttendance" @click="stopAttendance">结束考勤</button>
            <br>
            {{ $strStudents }}
        @else
            <button class="startAttendance" @click="startAttendance">开始考勤</button>
        @endif
    </section>

@endsection

@section('js')
    <script src="{{ asset('js/vue.dev.js') }}"></script>
    <script src="{{ asset('js/axios.dev.js') }}"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                code: '',
            },

            methods: {
                verify() {
                    let that = this
                    axios({
                        method: 'post',
                        url: '/student/verifycode',
                        timeout: 2000,
                        data: {
                            code: that.code,
                            attendance_id: '{{ $attendanceId }}',
                            class_id: '{{ $class_id }}'
                        }
                    })
                    .then(function (response) {
                        alert(response.data.message)
                        that.code = ''
                        if (response.data.code === 200) {
                            window.location.reload()
                        }

                    })
                    .catch(function (response) {
                        console.log(response)
                    })
                },
                stopAttendance() {
                    axios({
                        method: 'post',
                        url: '/teacher/stopattendance',
                        timeout: 2000,
                        data: {
                            attendance_id: '{{ $attendanceId }}'
                        }
                    })
                    .then(function (response) {
                        alert(response.data.message)
                        window.location.reload()


                    })
                    .catch(function (response) {
                        console.log(response)
                    })
                },
                startAttendance() {
                    let code = window.prompt('请输入考勤数字')

                    axios({
                        method: 'post',
                        url: '/teacher/startattendance',
                        timeout: 2000,
                        data: {
                            class_id: '{{ $class_id }}',
                            code: code
                        }
                    })
                        .then(function (response) {
                            alert(response.data.message)
                            window.location.reload()

                        })
                        .catch(function (response) {
                            console.log(response)
                        })
                }


            }

        })

    </script>
@endsection
